<template>
  <div class="echarts-wall">
    <div class="dot-bg" v-if="loading"></div>
    <div class="dot-elastic dotClass" v-if="loading"></div>
    <div class="echarts-content" ref="echartsDom"></div>
  </div>
</template>

<script lang="ts" setup>
//普通地图
// @ts-ignore
import {getCurrentInstance, onMounted, ref, watch} from "vue";
// @ts-ignore
import screen_config, {getPoint} from "@/components/global/bigscreen/screen_config";

defineOptions({
  name: "EchartsMap3D"
});

const props = defineProps({
  url: {type: String, default: ""},
  //地图请求参数
  params: {type: Object, default: {}},
  color: {
    type: Object, default: function () {
      return ['#6bcc75', '#65c78b', '#5fc2a0', '#5abead',
        '#52b9c7', '#4fb6d2', '#4ab2e5', '#52b9c7', '#5abead', '#dfae10', '#d5b314', '#c1bb1f',
        '#f34e2b', '#f56321', '#f56f1c', '#4ab2e5', '#4fb6d2', '#f58414', '#f58f0e', '#f5a305', '#e7ab0b', '#b9be23',
        '#e7ab0b', '#dfae10', '#d5b314', '#c1bb1f', '#b9be23',
        '#a6c62c', '#96cc34', '#89d23b', '#7ed741', '#77d64c',
        '#71d162',
      ]
    }
  },
  //地图显示 区域
  map: {type: String, default: 'china'},
  // 边的颜色
  borderColor: {type: String, default: "#0068FB"},
  // 默认区域颜色
  normalAreaColorFrom: {type: String, default: "#0C3994"},
  normalAreaColorEnd: {type: String, default: "#0C3994"},
  // 选中区域颜色
  emphasisColor: {type: String, default: "#0068FB"},
  // 是否显示label
  labelShow: {type: Boolean, default: false},
  // label字体
  labelFontSize: {type: Number, default: 12},
  // label字体颜色
  labelFontColor: {type: String, default: '#FFFFFF'},
  //地图 分类支持 -(map,mapFly,mapPin)
  mapType: {type: String, default: 'map'},
  //pin点的颜色
  pinColor: {type: String, default: '#0068FB'},
  //是否缩放
  roam: {type: Boolean, default: false},
  //特征大小
  symbolSize: {type: Number, default: 12},
  aspectScale: {type: Number, default: 0.8},
  //是否旋转
  rotateSensitivity: {type: Number, default: 0},
  //x轴偏移
  xBeta: {type: Number, default: 0},
  //y轴偏移
  yBeta: {type: Number, default: 0},
  //视距
  distance: {type: Number, default: 110},
  //地图厚度
  regionHeight: {type: Number, default: 6},

  //城市图标展示
  citySymbol: {type: Boolean, default: false},

});
//是否加载loading
const loading = ref<boolean>(false);

onMounted(() => {
  registerMap();
})

// @ts-ignore
let {proxy} = getCurrentInstance()
// dom 组件
const echartsDom = ref<any>(null);
//
let myEcharts: any = null;

//监听变化
watch(() => props.map, () => {
  registerMap();
})
//注册地图
const registerMap = () => {
  proxy.$http.post('/user-center/region/regionCityMap', {"region": props.map}).then((apiMap: any) => {
    if (apiMap) {
      proxy.$http.getJSON("/geoMap/" + apiMap.regionCode).then(function (data: any) {
        proxy.$echarts.registerMap(props.map, data);
        initMap().then((option: any) => {
          myEcharts = proxy.$echarts.init(echartsDom.value);
          if (myEcharts) {
            myEcharts.clear();
            myEcharts.setOption(option)
          }
        });
      });
    }
  });
}
//省/市/县坐标
const geoCoordMap: any = screen_config.geoMap;

const initMap = () => {
  return map();
}

const geo3D = () => {
  let labelShow: boolean = props.labelShow;
  if (props.mapType !== 'map') {
    labelShow = false;
  }
  return [{
    map: props.map,
    aspectScale: props.aspectScale,
    roam: false, //是否允许缩放
    itemStyle: {
      areaColor: 'transparent',
      borderColor: props.borderColor,
      borderWidth: 0,
    },
    zlevel: 9,
    silent: true,
  }];
}
//点的特征集合:{value:[坐标],name:''}
let points: any = [];
let mapFlyPoint =  getPoint("龙口市");
points.push({value: mapFlyPoint, name: "龙口市"});
points.push({value: getPoint("海阳市"), name: "海阳市"});

const map3D = () => {
  let labelShow: boolean = props.labelShow;
  if (props.mapType !== 'map' || props.citySymbol) {
    labelShow = false;
  }
  return {
    type: 'map3D',
    map: props.map,
    zlevel: 1,
    regionHeight: props.regionHeight,//地图厚度
    label: {
      show: labelShow,//是否显示市
      textStyle: {
        color: props.labelFontColor,//文字颜色
        fontSize: props.labelFontSize,//文字大小
        fontFamily: '微软雅黑',
        backgroundColor: "rgba(0,0,0,0)",//透明度0清空文字背景
      },
      formatter:  function (params: any) {
        return params.name
      }
    },
    //三维视觉属性
    itemStyle: {
      color: props.normalAreaColorFrom,
      borderWidth: 2,
      borderColor: props.borderColor
    },
    // 鼠标hover高亮
    emphasis: {
      label: {
        show: labelShow,//是否显示市
      },
      itemStyle: {
        color: props.emphasisColor,
        borderWidth: 2,
        borderColor: props.borderColor
      },
    },
    viewControl: {
      rotateSensitivity: props.rotateSensitivity,//旋转操作的灵敏度
      zoomSensitivity: 0,
      distance: props.distance, //地图视角 控制初始大小
      alpha: props.yBeta, //Y轴旋转
      beta: props.xBeta, //x轴旋转
    }
  };
}
//普通地图
const map = () => {
  return new Promise((resolve, reject) => {
    let option: any = {
      backgroundColor: 'transparent',
      geo: geo3D(),
      series: [map3D()],
    };
    if (props.citySymbol) {
      option.series.push({
        type: 'effectScatter',
        coordinateSystem: 'geo',
        showEffectOn: 'render',
        zlevel: 10,
        hoverAnimation: true,
        label: {
          normal: {
            formatter: function (params: any) {
              return params.name;
            },
            position: 'top',
            show: props.labelShow,
            color: props.labelFontColor,
            fontSize: props.labelFontSize,
            fontWeight: 'bold'
          }
        },
        itemStyle: {
          normal: {
            color: function (params: any) {
              //点的颜色
              return props.color[params.dataIndex]
            },
            shadowBlur: 10,
            shadowColor: '#333'
          }
        },
        symbolSize: props.symbolSize,
        data: points
      });
    }
    console.log(option,'map3D');
    resolve(option);
  });
}


const getData = () => {
  return new Promise((resolve, reject) => {
    proxy.$http.post(props.url, props.params)
        .then((apiResponse: any) => {
          if (apiResponse.success || apiResponse.data) {
            let echartsData = apiResponse.data.echartsData;
            let i = 0;
            let searData: any = [];
            Object.keys(echartsData).forEach((key: string) => {
              if (i === 0) {
                searData = echartsData[key];
              }
            })
            resolve(searData);
          }
        }).catch((err: any) => {
      reject(err)
    });
  });
}
</script>

<style scoped>

</style>